<template>
    <el-container class='heightAll'>
      <el-aside class='asideClass'>
        <el-col :span="24" class="logo">
          <el-button type="text">
            <img src="~@/assets/logo.png" alt="" />
          </el-button>
          <transition name="el-fade-in">
            <span v-show="fadeshow">公司制作</span>
          </transition>
        </el-col>
        <el-col :span="24" ref="menu">
          <el-menu @select="menuChange" background-color="#222d32" text-color="#FFF" active-text-color="#ffd04b" :collapse="isCollapse" class='widthAll' :unique-opened="true"
          default-active="/home/index">
            <el-menu-item index="/home/index">
              <i class="fa fa-home fa-lg right-5" aria-hidden="true"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="personalCentre">
              <template slot="title">
                <i class="fa fa-user fa-lg right-5"></i>
                <span slot="title">个人中心</span>
              </template>
              <el-menu-item index="/home/personalinfo">个人信息</el-menu-item>
              <el-menu-item index="/home/enterpriseinfo">我的企业</el-menu-item>
              <el-submenu index="orderManager">
                <template slot="title">订单管理</template>
                <el-menu-item index="/home/allorder">所有订单</el-menu-item>
                <el-menu-item index="/home/waitforauditorder">待审核订单</el-menu-item>
                <el-menu-item index="/home/waitforpayorder">待支付订单</el-menu-item>
                <el-menu-item index="/home/refundorder">退款订单</el-menu-item>
                <el-menu-item index="/home/waitfordeliveryorder">待发货订单</el-menu-item>
                <el-menu-item index="/home/waitforreceiptorder">待收货订单</el-menu-item>
                <el-menu-item index="/home/untreatedorder">未处理订单</el-menu-item>
              </el-submenu>
              <el-submenu index="backOrderManager">
                <template slot="title">退单管理</template>
                <el-menu-item index="/home/allbackorder">所有退单</el-menu-item>
                <el-menu-item index="/home/waitforprocessing">未处理退单</el-menu-item>
                <el-menu-item index="/home/notcompleted">未完成退单</el-menu-item>
                <el-menu-item index="/home/completed">已完成退单</el-menu-item>
                <el-menu-item index="/home/cancelbackorder">取消退单</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="fa fa-th-list fa-lg right-5"></i>
                <span slot="title">商品管理</span>
              </template>
              <el-menu-item index="/home/productcategory">商品目录</el-menu-item>
              <el-menu-item index="/home/productmanage">商品管理</el-menu-item>
              <el-menu-item index="/home/productattribute">商品属性</el-menu-item>
              <el-menu-item index="/home/productparam">商品参数</el-menu-item>
              <el-submenu index="3-5">
                <template slot="title">商城管理</template>
                <el-menu-item index="/home/allotorderrule">分单规则配置</el-menu-item>
                <el-menu-item index="/home/promotionplan">促销方案配置</el-menu-item>
                <el-menu-item index="3-5-3">定价方案配置</el-menu-item>
                <el-menu-item index="3-5-7">积分方案配置</el-menu-item>
              </el-submenu>
              <el-menu-item index="3-6">商品类别管理</el-menu-item>
              <el-menu-item index="3-7">仓库配置</el-menu-item>
              <el-menu-item index="3-8">分公司商品配置</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="fa fa-users fa-lg right-5"></i>
                <span slot="title">客户管理</span>
              </template>
              <el-menu-item index="4-1">客户新增</el-menu-item>
              <el-menu-item index="4-2">客户查询</el-menu-item>
              <el-menu-item index="4-3">客户审核</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="fa fa-gears fa-lg right-5"></i>
                <span slot="title">配置管理</span>
              </template>
              <el-submenu index="5-1">
                <template slot="title">权限管理</template>
                <el-menu-item index="5-1-1">角色权限</el-menu-item>
                <el-menu-item index="5-1-2">用户查询</el-menu-item>
                <el-menu-item index="5-1-3">角色账号</el-menu-item>
                <el-menu-item index="5-1-7">角色管理</el-menu-item>
              </el-submenu>
              <el-submenu index="5-2">
                <template slot="title">系统设置</template>
                <el-menu-item index="5-2-1">系统参数</el-menu-item>
                <el-menu-item index="5-2-2">缓存同步</el-menu-item>
                <el-menu-item index="5-2-3">日志查询</el-menu-item>
                <el-menu-item index="5-2-4">服务器配置</el-menu-item>
                <el-menu-item index="5-2-7">apk上传</el-menu-item>
              </el-submenu>
              <el-submenu index="5-3">
                <template slot="title">内容管理</template>
                <el-menu-item index="5-3-1">头条配置管理</el-menu-item>
                <el-menu-item index="5-3-2">公告管理</el-menu-item>
                <el-menu-item index="5-3-3">品牌配置管理</el-menu-item>
                <el-menu-item index="5-3-4">滚动图片管理</el-menu-item>
                <el-menu-item index="5-3-5">类别图片管理</el-menu-item>
                <el-menu-item index="5-3-6">栏目图片管理</el-menu-item>
                <el-menu-item index="5-3-7">首页商品管理</el-menu-item>
                <el-menu-item index="5-3-8">APP界面图片</el-menu-item>
                <el-menu-item index="5-3-9">菜单图片管理</el-menu-item>
                <el-menu-item index="5-3-9">启动广告配置管理</el-menu-item>
              </el-submenu>
              <el-submenu index="5-4">
                <template slot="title">组织机构管理</template>
                <el-menu-item index="5-4-1">岗位管理</el-menu-item>
                <el-menu-item index="5-4-2">业务员管理</el-menu-item>
              </el-submenu>
              <el-submenu index="5-5">
                <template slot="title">数据字典</template>
                <el-menu-item index="5-5-1">客户区域管理</el-menu-item>
                <el-menu-item index="5-5-2">客户类别管理</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header class='headerClass'>
          <el-col :span="12">
            <el-button type="text" @click='menuCollapse'>
              <i class="fa fa-bars fa-lg"></i>
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-popover popper-class="userpopover" ref="userpopover" placement="bottom-end" width="280" 
              trigger="hover" >
              <el-col :span="24" class="user-header">
                <el-col :span="24">
                  <img src="~@/assets/images/tab_user_on.png">
                </el-col>
                <el-col :span="24" class="user-header-title">
                  <el-col :span="24" class="username">
                    系统管理员
                  </el-col>
                  <el-col :span="24">
                    公司制作
                  </el-col>
                  <el-col :span="24">
                    注册日期：2017-10-10
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="user-footer">
                  <el-col :span="12">
                    <el-button>个人信息</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button-group>
                      <el-button>退出</el-button>
                      <el-button>锁屏</el-button>
                    </el-button-group>
                  </el-col>
              </el-col>
            </el-popover>
            <div class="user">
              <el-button type="text" v-popover:userpopover>
                <img src="~@/assets/images/tab_user_on.png">
                系统管理员
              </el-button>
            </div>
          </el-col>
        </el-header>
        <el-main class='mainClass'>
          <router-view></router-view>
        </el-main>
        <el-footer class='footerClass'>
          <el-col :span="24">
            <span>
            All rights reserved.<br>
            公司制作
            </span>
            <span>
              <i class="fa fa-qrcode fa-lg"></i>
            </span>
          </el-col>
        </el-footer>
      </el-container>
    </el-container>

</template>
<script>
    import './home.scss';
    import router from '@/router/index';
    import $ from 'jquery';

    export default { 
        data () {
            return {
              index : '',
              isCollapse : false,
              fadeshow : true,
            }
        },
        methods: {
            menuChange : function(index){
              router.push({path : index})
            },
            menuCollapse : function(index, obj){
              this.isCollapse = !this.isCollapse;
              if(this.isCollapse){//需要修改
                this.fadeshow = false;
                $(".asideClass").animate({width:'65px'});
              }else{
                this.fadeshow = true;
                $(".asideClass").animate({width:'300px'});
              }
            },
        },
        watch: {
            
        },
        created: function(){          
           router.push({path : "/home/index"})
        },
        beforeDestroy:function(){
          
        }
    }
</script>

